import React, { useImperativeHandle } from "react";
import { Form, Input, Row, Col, TreeSelect, Select, Radio } from 'antd';

import ProBox from "vendor/components/pro-box";
import { CreateOrEditActionRef } from "vendor/components/pro-table-native";
import { getEnv } from "@/constants";

import { useCreateUser } from './useCreateUser';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const CreateOrEditContent = React.forwardRef<CreateOrEditActionRef, { rowKey: string | number, values: any }>((props, actionRef) => {
  const [form] = Form.useForm();
  const { loading, initData } = useCreateUser();
  const { commonStatus, commonStatusList, userTypeList, userType} = getEnv().globalConfig;

  useImperativeHandle(actionRef, () => ({
    getFormData: () => new Promise((resolve, reject) => {
      form.validateFields().then((data) => {
        // 编辑状态时后端需要userName
        if (props.rowKey) {
          resolve({ userName: props.values.userName, ...data })
          return
        }
        resolve(data);
      }).catch(() => {
        reject(new Error("请检查参数"));
      });
    })
  }));

  return (
    <ProBox loading={loading}>
      <Form
        initialValues={Object.assign({
          sex: initData.sexList[0]?.value,
          status: commonStatus.normal,
          isAdmin: userType.front,
        }, props.values)}
        form={form}
      >
        {!props.rowKey && <Row>
          <Col span={12}>
            <Form.Item
              label="用户名"
              name="userName"
              rules={[{ required: true, message: '请填写用户名!' }]}
              {...layout}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请填写密码!' }]}
              {...layout}
            >
              <Input.Password />
            </Form.Item>
          </Col>
        </Row>}

        <Row>
          <Col span={12}>
            <Form.Item
              label="用户昵称"
              name="nickName"
              rules={[{ required: true, message: '请填写用户昵称!' }]}
              {...layout}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="归属组织"
              name="deptId"
              rules={[{ required: true, message: '请选择组织!' }]}
              {...layout}
            >
              <TreeSelect
                treeData={initData.orgTreeSelectData}
                placeholder="请选择组织"
              />
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={12}>
            <Form.Item
              label="手机号"
              name="mobile"
              rules={[
                { required: true, message: '请填写手机号!' },
              ]}
              {...layout}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="邮箱"
              name="email"
              rules={[{
                type: "email",
                message: "请输入正确的邮箱地址",
              }]}
              {...layout}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <Row align={"middle"}>
          <Col span={12}>
            <Form.Item
              label="性别"
              name="sex"
              {...layout}
            >
              <Select placeholder="请选择" options={initData.sexList} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="状态"
              name="status"
              {...layout}
            >
              <Radio.Group options={commonStatusList} />
            </Form.Item>
          </Col>
        </Row>

        <Row align={"middle"}>
          <Col span={12}>
            <Form.Item
              label="岗位"
              name="postIds"
              {...layout}
            >
              <Select
                mode="multiple"
                placeholder="请选择"
                options={initData.sysPostList}
                maxTagCount="responsive"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="用户类型"
              name="isAdmin"
              rules={[
                { required: true, message: '请选择用户类型!' },
              ]}
              {...layout}
            >
              <Radio.Group options={userTypeList} />
            </Form.Item>
          </Col>
        </Row>

        <Row align={"middle"}>
          <Col span={12}>
            <Form.Item
              label="系统角色"
              name="adminRoleId"
              rules={[
                { required: true, message: '请选择系统角色!' },
              ]}
              {...layout}
            >
              <Select
                placeholder="请选择"
                options={initData.allowUserUseAdminRoleList}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="自定义角色"
              name="roleIds"
              rules={[{ required: true, message: '角色不能为空' }]}
              {...layout}
            >
              <Select
                mode="multiple"
                placeholder="请选择"
                options={initData.sysRoleList}
                maxTagCount="responsive"
                allowClear
                showSearch
                filterOption={(inputValue, option) => option.label.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase())}
              />
            </Form.Item>
          </Col>
        </Row>

        {/* <Row align={"middle"}>
          <Col span={24}>
            
          </Col>
        </Row> */}

        <Row align={"middle"}>
          <Col span={24}>
            <Form.Item
              label="备注"
              name="remark"
              rules={[{ max: 150, message: '备注信息不能超过150个字！' }]}
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input.TextArea rows={4} placeholder="请输入内容" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </ProBox>
  )
});

export default CreateOrEditContent;
